<template>
  <div>
    <nav>
      <div>
        <!-- 声明式导航组件 -->
        <!-- 
          属性
          to: string|object  指定跳转的路由地址
          active-class 自定义指定激活的导航样式名称
          // vue-router3.x之前，还有一tag属性  之后删除了
          tag 指定router-link编译生成后的html标签是谁 默认为 a
         -->
        <!-- <router-link to="/home">首页</router-link> -->
        <router-link tag="h3" active-class="active" :to="{ path: '/home' }">首页</router-link>
      </div>
      <div>
        <router-link to="/about">关于</router-link>
      </div>
    </nav>
    <hr />
    <!-- 定义路由匹配成功后要渲染到的节点 -->
    <router-view />
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
nav {
  display: flex;
  div {
    margin-right: 20px;
  }
}
/* a {
  text-decoration: none;
  color: gray;
  &.router-link-active {
    color: red;
  }
  &.active {
    color: red;
  }
} */
</style>
